<template>
  <div>
    <Navbar />
    <div class="row rowhandle" style="padding-top: 50px">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">用户注册</div>
          <div class="panel-body">
            <form @submit.prevent="handleRegister">
              <div class="form-group" id="mail">
                <label for="email">注册邮箱</label>
                <input
                  type="email"
                  class="form-control"
                  v-model="user.userAccount"
                  id="email"
                  placeholder="请输入注册邮箱"
                  @focus="inputinit"
                />
              </div>
              <div class="form-group" id="pwd">
                <label for="pwd">密码</label>
                <div class="input-group">
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    class="form-control"
                    v-model="user.userPassword"
                    id="password"
                    placeholder="请输入6-20位密码"
                    @focus="inputinit"
                  />
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" @click="togglePasswordVisibility">
                      <span :class="passwordIcon" aria-hidden="true"></span>
                    </button>
                  </span>
                </div>
              </div>
              <div class="form-group" id="confirmPwd">
                <label for="confirmPassword">确认密码</label>
                <div class="input-group">
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    class="form-control"
                    v-model="user.checkPassword"
                    id="confirmPassword"
                    placeholder="请再次输入密码"
                    @focus="inputinit"
                  />
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" @click="togglePasswordVisibility">
                      <span :class="passwordIcon" aria-hidden="true"></span>
                    </button>
                  </span>
                </div>
              </div>
              <div class="form-group" id="verificationCode">
                <label for="code">验证码</label>
                <div class="input-group">
                  <input
                    type="text"
                    class="form-control"
                    v-model="user.code"
                    id="code"
                    placeholder="请输入验证码"
                    @focus="inputinit"
                  />
                  <span class="input-group-btn">
                    <button
                      class="btn btn-default"
                      type="button"
                      :disabled="isCodeSent"
                      @click="sendCode"
                    >
                      {{ isCodeSent ? `重新发送 (${countdown})` : '发送验证码' }}
                    </button>
                  </span>
                </div>
              </div>
              <div class="btn-toolbar" role="toolbar">
                <div class="btn-group" role="group">
                  <button type="submit" id="doregister" class="btn btn-primary">
                    &nbsp;注 册&nbsp;
                  </button>
                </div>
              </div>

              <section>
                <div class="text-with-hr">
                  <span>第三方账号登录</span>
                </div>
                <div class="btn-group btn-group-justified" role="group">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default lr-btn" @click="register(2)">
                      <span class="github">&nbsp;&nbsp;&nbsp;&nbsp;</span>Github登录
                    </button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default lr-btn" @click="register(3)">
                      <span class="qq">&nbsp;&nbsp;&nbsp;&nbsp;</span>QQ登录
                    </button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default lr-btn" @click="register(4)">
                      <span class="gitee">&nbsp;&nbsp;&nbsp;&nbsp;</span>Gitee登录
                    </button>
                  </div>
                </div>
              </section>
            </form>
          </div>
        </div>
      </div>
      <div class="col-md-3"></div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import { useAuthStore } from '@/stores/auth'
import type User from '@/api/User'
import apiClient from '@/api/axios'

const user = reactive({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
  code: ''
})

const passwordIcon = ref('glyphicon glyphicon-eye-close')
const showPassword = ref(false)
const isCodeSent = ref(false)
const countdown = ref(60)
const authStore = useAuthStore()
const router = useRouter()

const inputinit = (event: Event) => {
  const target = event.target as HTMLInputElement
  target.closest('.form-group')?.classList.remove('has-error', 'has-success')
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
  passwordIcon.value = showPassword.value
    ? 'glyphicon glyphicon-eye-open'
    : 'glyphicon glyphicon-eye-close'
}

const handleRegister = async () => {
  if (!user.code) {
    alert('验证码不能为空')
    return
  }
  if (user.userPassword !== user.checkPassword) {
    alert('两次输入的密码不一致')
    return
  }
  apiClient.post("/user/register",{
    "userAccount":user.userAccount,
    "userPassword":user.userPassword,
    "checkPassword":user.checkPassword,
    "code":user.code
  }).then((response)=>{
    if(response.data.code == 0){
      alert("注册成功!正在跳转至登录界面~")
      router.push("/user/login")
    }else{
      console.log("注册失败，收到服务器返回的数据为:" + JSON.stringify(response.data))
      alert(response.data.message)
    }
  })
}

const register = (type: number) => {
  // Implement third-party registration functionality
  alert("嘿嘿")
}

const sendCode = async () => {
  if (!user.userAccount) {
    alert('请先输入邮箱')
    return
  }
  apiClient.post('/email/sendCode',{"to":user.userAccount}).then((response) => {
    console.log('发送验证码后收到来自服务器的响应数据:' + JSON.stringify(response.data))
    if (response.data.code == 0) {
      alert('验证码发送成功，有效时间1分钟')
    } else {
      alert('验证码发送失败')
    }
  })
  isCodeSent.value = true
  const interval = setInterval(() => {
    countdown.value--
    if (countdown.value === 0) {
      clearInterval(interval)
      isCodeSent.value = false
      countdown.value = 60
    }
  }, 1000)
}
</script>

<style scoped>
@import url('https://cdn.dijianggroup.com/static/bootstrap.min.css');
@import url('https://cdn.dijianggroup.com/static/ie10-viewport-bug-workaround.css');
@import url('@/assets/app.css?fzs=168');

.rowhandle {
  margin-top: 50px;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.text-with-hr {
  text-align: center;
  position: relative;
  z-index: 2;
}
.text-with-hr:before {
  position: absolute;
  content: '';
  top: 20px;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid #d4d4d4;
  z-index: -1;
}
.text-with-hr span {
  display: inline-block;
  background: white;
  padding: 10px;
}

.lr-btn span {
  background-image: url('@/assets/image/g_g_q.png');
}
.lr-btn .github {
  background-position: -18px 0;
}
.lr-btn .qq {
  background-position: 16px 0;
}
.lr-btn .gitee {
  background-position: 0 0;
}
</style>
